<template>
  <div id="cate">
    <div class="head">
      <router-link  to='/' class="return"><img src="../assets/cate/return.png"></router-link>
      <router-link  class="search" to="search">
        <img src="../assets/cate/search.png">
        <span>输入商家名、品类或商圈</span>
      </router-link>
      <router-link class="mine" to="mine"><img src="../assets/cate/mine.png"></router-link>
    </div>
    <div class="body" v-show="select">
      <div class="download">
        <a class="download1" href="imeituan://www.meituan.com/home/"></a>
        <a href="#" class="download2"></a>
      </div>
      <ul class="classify ">
        <li class="icon">
          <a href="#">
            <img src="../assets/cate/hotpot.png">
            火锅
          </a>
        </li>
        <li class="icon">
          <a href="#">
            <img src="../assets/cate/drinks.png">
            甜点饮品
          </a>
        </li>
        <li class="icon">
          <a href="#">
            <img src="../assets/cate/buffet.png">
            自助餐
          </a>
        </li>
        <li class="icon">
          <a href="#">
            <img src="../assets/cate/snack.png">
            小吃快餐
          </a>
        </li>
        <li class="icon">
          <a href="#">
            <img src="../assets/cate/westernfood.png">
            西餐
          </a>
        </li>
        <li class="icon">
          <a href="#">
            <img src="../assets/cate/barbecue.png">
            烧烤烤肉
          </a>
        </li>
        <li class="icon">
          <a href="#">
            <img src="../assets/cate/buffet.png">
            香锅烤鱼
          </a>
        </li>
        <li class="icon">
          <a href="#">
            <img src="../assets/cate/seafood.png">
            海鲜
          </a>
        </li>
      </ul>
      <div class="blank"></div>
    </div>
    <div class="dropdown">
     <!-- <div class="nav">
        <a @click="nav1" :class='{change :isChange1}' >全部类目<img src= '../assets/cate/down.png' v-show="!isUp1"/><img src= '../assets/cate/up.png' v-show="isUp1"/></a>
        <a @click="nav2" :class='{change :isChange2}' >附近商家<img src= '../assets/cate/down.png' v-show="!isUp2"/><img src= '../assets/cate/up.png' v-show="isUp2"/></a>
        <a @click="nav3" :class='{change :isChange3}' >智能排序<img src= '../assets/cate/down.png' v-show="!isUp3"/><img src= '../assets/cate/up.png' v-show="isUp3"/></a>
        <a @click="nav4" :class='{change :isChange4}' >筛选<img src= '../assets/cate/down.png' v-show="!isUp4"/><img src= '../assets/cate/up.png' v-show="isUp4"/></a>
      </div>
      <ul v-show="navs1">
        <li v-for="nav in nav1" :key="nav.id">{{nav.text}}{{nav.num}}</li>
        <li>全部14335</li>
        <li>甜点饮品2585</li>
        <li>生日蛋糕1570</li>
        <li>火锅3189</li>
        <li>自助餐401</li>
        <li>小吃快餐5812</li>
        <li>日韩料理376</li>
        <li>西餐522</li>
        <li>聚餐宴请1269</li>
        <li>烧烤烤肉682</li>
        <li>川湘菜1405</li>
        <li>江浙菜93</li>
        <li>香锅烤鱼640</li>
        <li>粤菜174</li>
        <li>中式烧烤/烤串502</li>
        <li>西北菜971</li>
        <li>咖啡酒吧638</li>
        <li>京菜鲁菜73</li>
        <li>东北菜142</li>
        <li>生鲜蔬果132</li>
        <li>云贵菜17</li>
        <li>东南亚菜</li>
        <li>海鲜360</li>
        <li>素食20</li>
        <li>台湾/客家菜22</li>
        <li>创意菜153</li>
        <li>汤/粥/炖菜153</li>
        <li>蒙餐5</li>
        <li>新疆菜127</li>
        <li>其他美食1107</li>
      </ul>
      <ul v-show="navs2">
        <li>全城26940</li>
        <li>碑林区1876</li>
        <li>雁塔区2710</li>
        <li>高新区1460</li>
        <li>莲湖区1317</li>
        <li>未央区2465</li>
        <li>新城区1326</li>
        <li>灞桥区772</li>
        <li>临潼区355</li>
        <li>长安区1320</li>
        <li>高陵区270</li>
        <li>阎良区118</li>
        <li>蓝田县105</li>
        <li>周至县110</li>
        <li>近郊</li>
        <li>鄠邑区130</li>
      </ul>
      <ul v-show="navs3">
        <li>智能排序</li>
        <li>离我最近</li>
        <li>好评优先</li>
        <li>人气最高</li>
      </ul>
      <ul v-show="navs4">
        <li>4444</li>
        <li>4444</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
      </ul>-->
      <ul class="nav">
        <!-- 循环数据在点击调用changeli方法时将当前索引和本条数据传进去,并使用当前数据show的bool值添加或移除样式 -->
        <li :class="[{active:item.show}]" @click="changeli(index,item)" v-for="(item,index) in headerData" :key="item.id" class="bbb">
          <!-- 在这里打印出boll值方便查看 -->
          {{item.name}}<!--{{item.show}}-->
          <img src= '../assets/cate/down.png' v-show="!item.show"/><img src= '../assets/cate/up.png' v-show="item.show"/>
          <!-- 判断当前这条数据的bool值如果是true就打开二级菜单,如果是false就关闭二级菜单 -->
          <ul v-show="item.show" class="navs">
            <!-- 循环二级菜单数据并使用.stop阻止冒泡 -->
            <li v-for="(a,index) in item.list" v-on:click.stop="doThis(index)" :key="a.id" class="ddd">{{a}}</li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="allgoods" v-show="select">
      <div class="goods">
        <img src="../assets/kfc.jpg">
        <div class="information">
          <span class="name">唐僧猪八戒孙悟空沙和尚白龙马</span>
          <span class="coupon">西天取经三打白骨精真假美猴王大闹天宫金箍棒</span>
          <div class="price">
            <div>
              <span class="price1">19元</span>
              <span class="price2">门市价:31元</span>
            </div>
            <span class="price3">已售26458</span>
          </div>
        </div>
      </div>
      <div class="goods">
        <img src="../assets/kfc.jpg">
        <div class="information">
          <span class="name">唐僧猪八戒孙悟空沙和尚白龙马</span>
          <span class="coupon">西天取经三打白骨精真假美猴王大闹天宫金箍棒</span>
          <div class="price">
            <div>
              <span class="price1">19元</span>
              <span class="price2">门市价:31元</span>
            </div>
            <span class="price3">已售26458</span>
          </div>
        </div>
      </div>
      <div class="goods">
        <img src="../assets/kfc.jpg">
        <div class="information">
          <span class="name">唐僧猪八戒孙悟空沙和尚白龙马</span>
          <span class="coupon">西天取经三打白骨精真假美猴王大闹天宫金箍棒</span>
          <div class="price">
            <div>
              <span class="price1">19元</span>
              <span class="price2">门市价:31元</span>
            </div>
            <span class="price3">已售26458</span>
          </div>
        </div>
      </div>
      <div class="goods">
        <img src="../assets/kfc.jpg">
        <div class="information">
          <span class="name">唐僧猪八戒孙悟空沙和尚白龙马</span>
          <span class="coupon">西天取经三打白骨精真假美猴王大闹天宫金箍棒</span>
          <div class="price">
            <div>
              <span class="price1">19元</span>
              <span class="price2">门市价:31元</span>
            </div>
            <span class="price3">已售26458</span>
          </div>
        </div>
      </div>
      <div class="goods">
        <img src="../assets/kfc.jpg">
        <div class="information">
          <span class="name">唐僧猪八戒孙悟空沙和尚白龙马</span>
          <span class="coupon">西天取经三打白骨精真假美猴王大闹天宫金箍棒</span>
          <div class="price">
            <div>
              <span class="price1">19元</span>
              <span class="price2">门市价:31元</span>
            </div>
            <span class="price3">已售26458</span>
          </div>
        </div>
      </div>
      <div class="goods">
        <img src="../assets/kfc.jpg">
        <div class="information">
          <span class="name">唐僧猪八戒孙悟空沙和尚白龙马</span>
          <span class="coupon">西天取经三打白骨精真假美猴王大闹天宫金箍棒</span>
          <div class="price">
            <div>
              <span class="price1">19元</span>
              <span class="price2">门市价:31元</span>
            </div>
            <span class="price3">已售26458</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer" v-show="select">
      <div class="footer-bar">
        <button class="login" @click="login">登录</button>
        <button class="register" @click="register">注册</button>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;城市:</span>
        <button class="location" @click="citys">西安</button>
      </div>
      <ul class="footer-nav">
        <li>
          <a class="react" @click="homepage">首页</a>
        </li>
        <li>|</li>
        <li><a class="react" @click="login">我的</a>
        </li>
        <li>|</li>
        <li><a class="react"  href="//i.meituan.com/client" data-source="(direct)">美团下载</a>
        </li>
        <li>|</li>
        <li><a class="react" href="//www.meituan.com?pcstyle=1">电脑版</a>
        </li>
        <li>|</li>
        <li><a class="react"  @click="helps">帮助</a>
        </li>
      </ul>
      <div class="footer-links">友情链接：
        <a href="//m.maoyan.com/?channel=touch_group">猫眼电影</a>
        <a  href="//m.dianping.com">大众点评</a>
        <a href="https://i.meituan.com/awp/hfe/hotel-fe-itower_awp/journey/guide-download/index.html?refer_source=yqlj">美团旅行</a>
        <a href="//i.zhenguo.com" class="linkminsu">榛果民宿</a>
        <a href="//evt.dianping.com/synthesislink/9496.html">大众点评下载</a>
        <a href="https://xue.meituan.com/?from=mt0" class="linkschool">美团点评餐饮学院</a>
        <a href="https://i.meituan.com/awp/hfe/block/6c4bec785dce/11188/index.html">快驴进货商家合作</a>
      </div>
      <div class="footer-copyright">
        <div class="hr"></div>
        <span class="footer-copyright-text">©2018 美团网 <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">京ICP证070791号</a></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cate',
  data () {
    return {
      headerData: [{
        name: '全部类目',
        list: ['全部14335', '甜点饮品2585', '生日蛋糕1570', '火锅3189', '自助餐401', '小吃快餐5812', '日韩料理376', '西餐522', '聚餐宴请1269', '烧烤烤肉682', '川湘菜1405', '江浙菜93', '香锅烤鱼640'],
        show: false
      }, {
        name: '附近商家',
        list: ['子集2', '子集', '子集', '子集', '子集'],
        show: false
      }, {
        name: '智能排序',
        list: ['子集3', '子集', '子集', '子集', '子集'],
        show: false
      }, {
        name: '筛选',
        list: ['子集4', '子集', '子集', '子集', '子集'],
        show: false
      }],
      cities: [{
        value: 'Beijing',
        label: '北京'
      }, {
        value: 'Shanghai',
        label: '上海'
      }, {
        value: 'Nanjing',
        label: '南京'
      }, {
        value: 'Chengdu',
        label: '成都'
      }, {
        value: 'Shenzhen',
        label: '深圳'
      }, {
        value: 'Guangzhou',
        label: '广州'
      }],
      value6: '',
      select: true,
      navs1: false,
      navs2: false,
      navs3: false,
      navs4: false,
      down: true,
      changeNav: '',
      isChange1: false,
      isChange2: false,
      isChange3: false,
      isChange4: false,
      isUp1: false,
      isUp2: false,
      isUp3: false,
      isUp4: false
    }
  },
  methods: {
    changeli: function (ind, item) {
      // 先循环数据中的show将其全部置为false,此时模板里的v-if判断生效关闭全部二级菜单,并移除样式
      this.headerData.forEach(i => {
        // 判断如果数据中的headerData[i]的show属性不等于当前数据的show属性那么headerData[i]等于false
        if (i.show !== this.headerData[ind].show) {
          i.show = false
          this.select = true
        }
      })
      // 取反(true或false)
      item.show = !item.show
      this.headerData.forEach(i => {
        if (i.show === true) {
          this.select = false
        }
      })
      console.log(item.name)
    },
    doThis: function (index) {
      alert(index)
    },
    nav1 () {
      if (this.select === true) {
        this.select = false
        this.navs1 = true
        this.isChange1 = true
        this.isUp1 = true
      } else if (this.select === false && this.navs1 === true) {
        this.navs1 = false
        this.select = true
        this.isChange1 = false
        this.isUp1 = false
      } else if (this.select === false && this.navs2 === true) {
        this.navs2 = false
        this.navs1 = true
        this.isChange1 = true
        this.isUp1 = true
        this.isChange2 = false
        this.isUp2 = false
      } else if (this.select === false && this.navs3 === true) {
        this.navs3 = false
        this.navs1 = true
        this.isChange1 = true
        this.isUp1 = true
        this.isChange3 = false
        this.isUp3 = false
      } else if (this.select === false && this.navs4 === true) {
        this.navs4 = false
        this.navs1 = true
        this.isChange1 = true
        this.isUp1 = true
        this.isChange4 = false
        this.isUp4 = false
      }
    },
    nav2 () {
      if (this.select === true) {
        this.select = false
        this.navs2 = true
        this.isChange2 = true
        this.isUp2 = true
      } else if (this.select === false && this.navs2 === true) {
        this.navs2 = false
        this.select = true
        this.isChange2 = false
        this.isUp2 = false
      } else if (this.select === false && this.navs1 === true) {
        this.navs1 = false
        this.navs2 = true
        this.isChange2 = true
        this.isUp2 = true
        this.isChange1 = false
        this.isUp1 = false
      } else if (this.select === false && this.navs3 === true) {
        this.navs3 = false
        this.navs2 = true
        this.isChange2 = true
        this.isUp2 = true
        this.isChange3 = false
        this.isUp3 = false
      } else if (this.select === false && this.navs4 === true) {
        this.navs4 = false
        this.navs2 = true
        this.isChange2 = true
        this.isUp2 = true
        this.isChange4 = false
        this.isUp4 = false
      }
    },
    nav3 () {
      if (this.select === true) {
        this.select = false
        this.navs3 = true
        this.isChange3 = true
        this.isUp3 = true
      } else if (this.select === false && this.navs3 === true) {
        this.navs3 = false
        this.select = true
        this.isChange3 = false
        this.isUp3 = false
      } else if (this.select === false && this.navs1 === true) {
        this.navs1 = false
        this.navs3 = true
        this.isChange3 = true
        this.isUp3 = true
        this.isChange1 = false
        this.isUp1 = false
      } else if (this.select === false && this.navs2 === true) {
        this.navs2 = false
        this.navs3 = true
        this.isChange3 = true
        this.isUp3 = true
        this.isChange2 = false
        this.isUp2 = false
      } else if (this.select === false && this.navs4 === true) {
        this.navs4 = false
        this.navs3 = true
        this.isChange3 = true
        this.isUp3 = true
        this.isChange4 = false
        this.isUp4 = false
      }
    },
    nav4 () {
      if (this.select === true) {
        this.select = false
        this.navs4 = true
        this.isChange4 = true
        this.isUp4 = true
      } else if (this.select === false && this.navs4 === true) {
        this.navs4 = false
        this.select = true
        this.isChange4 = false
        this.isUp4 = false
      } else if (this.select === false && this.navs1 === true) {
        this.navs1 = false
        this.navs4 = true
        this.isChange4 = !this.isChange4
        this.isUp4 = true
        this.isChange1 = false
        this.isUp1 = false
      } else if (this.select === false && this.navs2 === true) {
        this.navs2 = false
        this.navs4 = true
        this.isChange4 = true
        this.isUp4 = true
        this.isChange2 = false
        this.isUp2 = false
      } else if (this.select === false && this.navs3 === true) {
        this.navs3 = false
        this.navs4 = true
        this.isChange4 = true
        this.isUp4 = true
        this.isChange3 = false
        this.isUp3 = false
      }
    },
    login () {
      this.$router.push('mine')
    },
    register () {
      this.$router.push('login')
    },
    citys () {
      this.$router.push('city')
    },
    homepage () {
      this.$router.push('/')
    },
    helps () {
      this.$router.push('help')
    }
  }
}
</script>

<style scoped lang="scss">
#cate{
  width: 6.4rem;
  margin: 0 auto;
}
.head{
  display:flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
  margin: 0 auto;
  padding: 0;
  width: 6.4rem;
  height: .8rem;
  background-color: #fff;
  .return{
    img{
      display: block;
      width: .4rem;
      height: .4rem;
      margin: .2rem 0 .2rem 0.15rem ;
    }
  }
  .search{
    display: flex;
    justify-content: flex-start;
    width: 4.5rem;
    height: .5rem;
    margin:auto 0;
    border-radius: 1rem;
    font-size: .2rem;
    line-height: .5rem;
    color: #8e8e94;
    background-color: #ebeced;
    border:.005rem solid  azure;
    img{
      width: .25rem;
      height: .25rem;
      margin: .15rem .1rem .1rem  .6rem;
      font-size: .5rem;
      color: #fff;
    }
  }
  .mine{
    width: .5rem;
    font-size: 0.15rem;
    text-align:center;/*水平居中*/
    overflow: hidden;
    color: #fff;
    img{
      display: block;
      width: .4rem;
      height: .4rem;
      margin: .2rem  .5rem .2rem 0;
    }
  }
}
.body{
  .download{
    width: 6.4rem;
    margin: 0 auto;
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    height: 2rem;
    background-image: url("../assets/downloadbg.png");
    background-repeat: no-repeat;
    background-size:100% 100%;
    position: relative;
    border-bottom: 1px solid #f0efed;
    .download1{
      width: 2rem;
      height: .7rem;
      position: absolute;
      left:1.1rem;
      bottom: .2rem;
    }
    .download2{
      width: 2rem;
      height: .7rem;
      position: absolute;
      right:1.1rem;
      bottom: .2rem;
    }
  }
  .classify{
    height: 3.4rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    li{
      width: 1.5rem;
      height: 1.6rem;
      a{
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: space-around;
        width: 1.5rem;
        height: 1.6rem;
        font-size: .1rem;
        color: #666;
        img{
          display: block;
          width: .9rem;
          height: .9rem;
        }
      }
    }
  }
}
.blank{
  width: 100%;
  margin: 0 auto;
  height: .15rem;
  background-color:#f0f0f0;
}
.allgoods{
  width: 6.4rem;
  margin: 0 auto;
  .goods{
    width:6rem;
    display: flex;
    justify-content: flex-start;
    border-top: 1px solid #f0efed;
    padding: .2rem 0;
    margin: 0 0 0 .4rem;
    img{
      display: block;
      width: 1.8rem;
      height: 1.8rem;
    }
    .information{
      display: flex;
      flex-direction: column;
      margin-left: .2rem;
      .name{
        font-size: .35rem;
        color: black;
        width: 3.7rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .coupon{
        font-size: .2rem;
        color: black;
        margin: .2rem 0 .5rem 0;
        width: 3.7rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .price{
        height: .5rem;
        display: flex;
        justify-content:space-between;
        div{
          line-height: .5rem;
          align-items: center;
          display: flex;
          justify-content: flex-start;
          .price1{
            display: block;
            font-size: .35rem;
            color: #1cc7b5;
          }
          .price2{
            display: block;
            font-size: .1rem;
            color: #666;
            padding: .15rem .3rem .15rem .15rem;
          }
        }
        .price3{
          font-size: .25rem;
          color: #666;
        }
      }
    }
  }
}
.dropdown{
  width: 6.4rem;
  position: relative;
  .nav{
    width: 100%;
    height: .8rem;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    color: #b7b7b7;
   .bbb{
     font-size: .2rem;
     text-align: center;
     line-height: .8rem;
     display: flex;
     img{
       display: block;
       width: .25rem;
       height: .2rem;
       padding: .3rem 0 0 .1rem;
     }
    }
    .navs{
      position: absolute;
      left: 0;
      top: .8rem;
      width: 6.4rem;
      display: flex;
      flex-direction: column;
      .ddd{
        display:block;
        height: .8rem;
        font-size: .3rem;
        line-height: .8rem;
        border-top: 1px solid #ddd8cd;
        padding-left: .5rem;
        color: #b7b7b7;
        text-align: justify;
      }
    }
  }
}
.change{
  color: #06c1ae;
}
.footer{
  height: 3.6rem;
  width: 6rem;
  margin: 0 auto;
  padding: .2rem;
  background-color: #f0efed;
  .footer-bar {
    font-size: .25rem;
    margin-bottom: .4rem;
    display: flex;
    justify-content: space-between;
    button{
      display: inline-block;
      width: 1.2rem;
      height: .6rem;
      border-radius: .06rem;
      font-size: .28rem;
      vertical-align: middle;
      line-height: .6rem;
      cursor: pointer;
      border: .02rem solid #06c1ae;
      padding: 0 .3rem;
      background: 0;
      color: #06c1ae;
    }
    .location{
      width: 1.8rem;
    }
    span{
      width: 1.2rem;
      text-align: center;
      line-height: .6rem;
      font-size: .3rem;
    }
  }
  .footer-nav{
    margin: 0;
    padding: .18rem 0;
    font-size: .22rem;
    display: flex;
    flex-direction:row;
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: center;
    li{
      .line{
        color: black;
        line-height: 1.2rem;
      }
      a{
        display: block;
        height: 100%;
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 .25rem;
        color: #06c1ae;
      }
    }
  }
  .footer-links{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-size: .24rem;
    margin: .3rem .2rem 0 .2rem;
    text-align: center;
    a{
      display: block;
      color: #06c1ae;
      font-size: .24rem;
      padding: 0 .2rem .1rem .3rem;
      text-align: center;
    }
    .linkminsu{
      margin: 0 0 0 .5rem;
    }
    .linkschool{
      margin: 0 0 0 .5rem;
    }
  }
  .footer-copyright {
    font-size: .05rem;
    text-align: center;
    position: relative;
    .hr {
      display: block;
      content: "";
      width: 100%;
      position: absolute;
      top: 50%;
      border-top: 1px solid #999;
      z-index: 2;
    }
    .footer-copyright-text {
      position: relative;
      width: 4rem;
      margin: 0 auto;
      color: #999;
      background-color: #f0efed;
      font-size: .05rem;
      display: flex;
      justify-content: center;
      z-index: 3;
      a{
        display: block;
        font-size: .05rem;
        color: #999;
      }
    }
  }
}
</style>
